<template>
	<view class="">
		<view class="form-body">
			<u-form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth="auto"
				errorType="toast">
				<u-form-item label="卡项用途" borderBottom>
					<view class="flex justify-end">
						<view class="">
							<u-radio-group v-model="formData.purpose" placement="row">
								<u-radio activeColor="#e54d42" :name="1" label="售卖卡"></u-radio>
								<u-radio activeColor="#e54d42" :name="2" label="体验卡"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="卡项标题" prop="name" borderBottom>
					<u-input v-model="formData.name" border="none" placeholder="建议输入12字以内" inputAlign="right" />
				</u-form-item>
				<u-form-item label="卡片颜色" prop="bgColor" borderBottom>
					<view class="flex justify-end">
						<view class="padding-26" :style="{backgroundColor:formData.bgColor}" @click="$refs.colorPicker.open()"></view>
					</view>
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<u-form-item label="售卖价格" prop="salePrice" borderBottom>
					<u-input v-model="formData.salePrice" border="none" inputAlign="right" type="number" placeholder="￥" />
				</u-form-item>
				<u-form-item label="销售提成" borderBottom>
					<view class="pr-10">
						<u-input v-model="formData.salePercentage" type="number" border="none" placeholder="请输入数字" inputAlign="right" />
					</view>
					<u-radio-group slot="right" v-model="formData.salePercentageType" placement="row">
						<u-radio activeColor="#e54d42" :name="2" label="元"></u-radio>
						<u-radio activeColor="#e54d42" :name="1" label="%"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="有效天数" prop="validDays" :borderBottom="formData.items.length === 0">
					<view class="flex align-center">
						<u-input v-model="formData.validDays" border="none" inputAlign="right" type="number" placeholder="请输入卡项有效天数"/>
						<text class="ml-10">天</text>
					</view>
				</u-form-item>
				<view class="">
					<view class="fsize-26 line-gray padding-20" v-if="formData.items.length !== 0">服务项</view>
					<view class="" v-for="(im, ix) in formData.items" :key="im.projectId">
						<u-form-item borderBottom>
							<view class="flex justify-between align-center line-red">
								<text>{{im.projectObj.name}}</text>
								<u-tag borderColor="#e54d42" color="#e54d42" text="删除" type="error" size="mini" plain @click="onDel(im.projectId)" />
							</view>
						</u-form-item>
						<u-form-item label="次数" labelWidth="65" borderBottom>
							<u-input v-model="im.times" type="number" border="none" placeholder="请输入数字" inputAlign="right" />
						</u-form-item>
						<u-form-item label="手工提成" labelWidth="65" :borderBottom="ix===formData.items.length-1">
							<view class="flex">
								<view class="pr-10">
									<u-input v-model="im.manualPercentage" type="number" border="none" placeholder="请输入数字" inputAlign="right" />
								</view>
								<u-radio-group v-model="im.manualPercentageType" placement="row">
									<u-radio activeColor="#e54d42" :name="2" label="元" />
									<u-radio activeColor="#e54d42" :name="1" label="%" />
								</u-radio-group>
							</view>
						</u-form-item>
						<u-gap v-if="ix!==formData.items.length-1" height="5" bgColor="#f7f7f7" />
					</view>
				</view>
			</u-form>
		</view>
		<view class="bg-white pt-30 pb-30 mb-30 text-align-center line-red" @click="topro">
			添加项目
		</view>
		<view class="pl-30 pr-30">
			<u-button type="primary" size="large" color="#e54d42" text="确定" @click="onSubmit" />
		</view>
		<my-color-picker ref="colorPicker" @confirm="setCardBgColor"/>
	</view>
</template>

<script>
	import myColorPicker from '@/components/my-color-picker/my-color-picker.vue'
	export default {
		components: { myColorPicker },
		data() {
			return {
				isEdit: false,
				fileList: [],
				formData: {
					contentBody: '<p>手机端</p>',
					description: '',
					name: '',
					purpose: 1,
					salePercentage: 0,
					salePercentageType: 2,
					salePrice: 0,
					shareImageUrl: '',
					status: 0,
					storeId: '',
					validDays: '',
					attributes: [],
					bgColor:'#000',
					items: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入项目名称',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		onLoad(option) {
			let that = this
			if (option.id) {
				uni.setNavigationBarTitle({ title: '编辑卡项', })
				this.isEdit = true
				this.getEdit(option.id)
			} else {
				uni.setNavigationBarTitle({ title: '新增卡项' })
				this.isEdit = false
			}
			uni.$on('event-pros', data=>{
				if(that.formData.items.length>0){
					that.formData.items = data.map(im=>{
						const found = that.formData.items.find(obj => obj.projectId === im.projectId)
						return found ? Object.assign({}, found, im) : im
					})
				}else {
					that.formData.items = data
				}
			})
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			setCardBgColor(e){
				this.formData.bgColor = e.color
			},
			topro(){
				uni.$u.route('/pages/selectPage/project', { items: JSON.stringify(this.formData.items), type: '1' })
			},
			getEdit(id) {
				let that = this
				this.$reqJsonPost('ProjectCardItemGetEdit', { id: id }).then(res => {
					this.formData = {
						...res.data.model,
						attributes: res.data.attributes,
						items: res.data.items
					}
					this.fileList.push({ url: res.data.model.shareImageUrl })
				})
			},
			// 删除项目
			onDel(id){
				this.formData.items = this.formData.items.filter(im=>im.projectId !== id)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.formData.image = ''
			},
			onSubmit() {
				this.$refs.form.validate().then(res => {
					if (this.isEdit) {
						this.$reqJsonPost('ProjectCategoryDoEdit', this.formData).then(res => {
							// uni.redirectTo({ url:'/pages/project/card/list' })
							uni.$emit('upCardList')
							uni.navigateBack()
						})
					} else {
						this.$reqJsonPost('ProjectCardItemDoCreate', {...this.formData, id: 0}).then(res => {
							// uni.redirectTo({ url:'/pages/project/card/list' })
							uni.$emit('upCardList')
							uni.navigateBack()
						})
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map(item => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.formData.image = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			}
		}
	}
</script>
